<template>
  <div :style="background(picUrl)" class="container">
    <div class="play">
      <div class="head">
        <i @click="$router.back(-1)" class="iconfont icon-dajiantouzuo"></i>
        <i class="iconfont icon-shuju"></i>
      </div>
      <div class="img-lyrics">
        <div class="Img">
          <img class="img" :src="getimg(picUrl)" alt="" />
        </div>
      </div>
      <div class="The-progress-bar"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      picUrl: "",
    };
  },
  computed: {},
  watch: {},
  methods: {
    getpicurl() {
      this.picUrl = this.$route.query.url;
      //   console.log(this.picUrl);
    },
    background(val) {
      //   console.log(val);
      return {
        backgroundImage: "url(" + val + ")",
      };
    },
    getimg(val){
      return val
    }
  },
  created() {
    this.getpicurl();
  },
  mounted() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  .play {
    padding: 10px 10px 0px 10px;
    height: 100%;
    backdrop-filter: blur(12px);
    box-sizing: border-box;
    .head {
      display: flex;
      justify-content: space-between;
      .icon-dajiantouzuo {
        font-size: 20px;
        color: rgb(213, 209, 209);
      }
      .icon-shuju {
        font-size: 20px;
        color: rgb(213, 209, 209);
      }
    }
    .img-lyrics {
      padding-top: 25px;
      height: 60%;
      box-sizing: border-box;
      .Img {
        margin: auto;
        height: 270px;
        width: 270px;
        background-color: rgb(38, 36, 37);
          border-radius: 50%;
        .img {
          margin-top: 35px;
          height: 200px;
          width: 200px;
          border-radius: 50%;
          // display: block;
          animation: spin 10s linear infinite;
        }
      }
    }
  }
}
@keyframes spin {
  0%{
    transform: rotateZ(0deg);
  }
  100%{
    transform: rotateZ(360deg);
  }
}
</style>
